import { lazy, LazyExoticComponent, ComponentType, ReactNode } from "react";
// 导入Ant Design图标组件
import {
    HomeOutlined,
    UnorderedListOutlined,
    PlusOutlined,
    FolderOutlined,
    UploadOutlined,
    TeamOutlined,
    RobotOutlined,
} from '@ant-design/icons';
import {
    createBrowserRouter,
    Navigate,
    RouteObject
} from "react-router-dom";

// ========== 类型定义 ==========
/**
 * 扩展路由配置类型
 * - 继承RouteObject基础属性（去除children，重新定义）
 * - 新增title（路由标题）和icon（图标组件）
 * - 支持嵌套子路由（children）
 */
interface RouteConfig extends Omit<RouteObject, 'children'> {
    title: string;          // 路由显示标题（用于菜单和面包屑）
    icon?: React.ComponentType; // 路由图标（Ant Design图标组件）
    children?: RouteConfig[]; // 子路由配置数组
}

/**
 * 路由键值类型定义
 * - 统一管理路由相关文本键（配合国际化使用）
 * - 包含页面标题和语言选项键
 */
export interface RouteKeysType {
    HOME: string;
    LIST_OPERATIONS: string;
    LIST_ADD: string;
    LIST_MANAGE: string;
    FILE_LIST: string;
    UPLOAD_FILE: string;
    MANAGE_PERSONNEL: string;
    DIGITAL_HUMAN: string;
    LANGUAGES: {
        ZH: string;
        EN: string;
        JA: string;
        KO: string;
    };
}

// 路由键值具体实现（与国际化文件中的键对应）
export const ROUTE_KEYS: RouteKeysType = {
    HOME: "route.home",
    LIST_OPERATIONS: "route.list_operations",
    LIST_ADD: "route.list_add",
    LIST_MANAGE: "route.list_manage",
    FILE_LIST: "route.file_list",
    UPLOAD_FILE: "route.upload_file",
    MANAGE_PERSONNEL: "route.manage_personnel",
    DIGITAL_HUMAN: "route.DigitalHuman",
    LANGUAGES: {
        ZH: "language.zh",
        EN: "language.en",
        JA: "language.ja",
        KO: "language.ko",
    },
};

// 延迟加载组件类型别名
type LazyComponent = LazyExoticComponent<ComponentType<any>>;

// ------------------------------
// 三级路由组件（延迟加载）
// ------------------------------
const Add: LazyComponent = lazy(() => import("../pages/List/Add/Add")); // 列表添加页面
const FileList: LazyComponent = lazy(() => import("../pages/List/FileList/FileList")); // 文件列表页面
const ListManage: LazyComponent = lazy(() => import("../pages/List/ListManage/ListManage")); // 列表管理页面

// ------------------------------
// 二级路由组件（延迟加载）
// ------------------------------
const List: LazyComponent = lazy(() => import("../pages/List/List")); // 列表首页
const Index: LazyComponent = lazy(() => import("../pages/Index/Index")); // 系统首页
const File: LazyComponent = lazy(() => import("../pages/File/File")); // 文件上传页面
const Manage: LazyComponent = lazy(() => import("../pages/Manage/Manage")); // 人员管理页面

// ------------------------------
// 路由配置数组（根据角色动态生成）
// ------------------------------
export let routerList: RouteConfig[]; // 导出路由列表供其他组件使用
const role_name = localStorage.getItem("role_name"); // 获取当前用户角色（从本地存储）

// 根据角色权限生成不同的路由配置
if (role_name === "管理员") {
    routerList = [
        {
            path: "/",
            element: <Index />,
            title: ROUTE_KEYS.HOME,
            icon: HomeOutlined, // 首页图标
        },
        {
            path: "list/", // 二级路由路径（相对路径，基于父路由）
            element: <List />,
            title: ROUTE_KEYS.LIST_OPERATIONS,
            icon: UnorderedListOutlined, // 列表操作图标
            children: [ // 三级子路由
                {
                    path: "add", // 子路由路径（完整路径为 /list/add）
                    element: <Add />,
                    title: ROUTE_KEYS.LIST_ADD,
                    icon: PlusOutlined, // 添加图标
                },
                {
                    path: "mange", // 列表管理页面
                    element: <ListManage />,
                    title: ROUTE_KEYS.LIST_MANAGE,
                    icon: FolderOutlined, // 文件夹图标
                },
                {
                    path: "files", // 文件列表页面
                    element: <FileList />,
                    title: ROUTE_KEYS.FILE_LIST,
                    icon: FolderOutlined,
                },
            ],
        },
        {
            path: "/upload", // 绝对路径路由
            element: <File />,
            title: ROUTE_KEYS.UPLOAD_FILE,
            icon: UploadOutlined, // 上传图标
        },
        {
            path: "/admin", // 管理员专属路由（人员管理）
            element: <Manage />,
            title: ROUTE_KEYS.MANAGE_PERSONNEL,
            icon: TeamOutlined, // 团队图标
        },
    ];
} else {
    // 普通用户路由配置（移除管理员专属路由）
    routerList = [
        {
            path: "/",
            element: <Index />,
            title: ROUTE_KEYS.HOME,
            icon: HomeOutlined,
        },
        {
            path: "/list/", // 注意：这里使用绝对路径（避免权限不足时路径解析错误）
            element: <List />,
            title: ROUTE_KEYS.LIST_OPERATIONS,
            icon: UnorderedListOutlined,
            children: [
                {
                    path: "mange",
                    element: <ListManage />,
                    title: ROUTE_KEYS.LIST_MANAGE,
                    icon: FolderOutlined,
                },
                {
                    path: "files",
                    element: <FileList />,
                    title: ROUTE_KEYS.FILE_LIST,
                    icon: FolderOutlined,
                },
            ],
        },
        {
            path: "/upload",
            element: <File />,
            title: ROUTE_KEYS.UPLOAD_FILE,
            icon: UploadOutlined,
        },
    ];
}

/**
 * 递归转换路由配置格式
 * @param routers 原始路由配置数组（RouteConfig类型）
 * @returns React Router v6所需的RouteObject数组
 */
const formRouter = (routers: RouteConfig[]): RouteObject[] => {
    return routers.map((router) => ({
        ...router, // 继承原始路由属性
        // 递归处理子路由（如果存在children，则转换为RouteObject数组）
        children: router.children ? formRouter(router.children) : undefined,
    }));
};

// ------------------------------
// 一级路由组件（延迟加载）
// ------------------------------
const MyLayout: LazyComponent = lazy(() => import("../pages/MyLayout/MyLayout")); // 系统主布局
const Login: LazyComponent = lazy(() => import("../pages/Login/Login")); // 登录页面
const Error: LazyComponent = lazy(() => import("../pages/404/Error")); // 404页面
const Error403: LazyComponent = lazy(() => import("../pages/403/Error403")); // 权限拒绝页面
const Numren: LazyComponent = lazy(() => import("../pages/Numren/Numren")); // 数字人页面（独立路由）

// ------------------------------
// 创建浏览器路由实例
// ------------------------------
const router = createBrowserRouter([
    {
        path: "/",
        element: <MyLayout />, // 主布局组件（包含侧边栏、面包屑等）
        children: formRouter(routerList), // 动态注入根据角色生成的子路由
    },
    {
        path: "/login",
        element: <Login />, // 登录路由
    },
    {
        path: "/Numren",
        element: <Numren />, // 独立数字人路由（不受角色权限控制）
    },
    {
        path: "*", // 通配符路由（处理所有未匹配路径）
        element: <Error />, // 404页面
    },
    {
        path: "/403",
        element: <Error403 />, // 权限不足页面
    },
]);

export default router;